<template>
  <div style="top:0">
    <div class="flex text-white bg-green-700" style="height:50px;">
      <el-col :span="3" class="flex justify-center items-center">
        <i class="el-icon-s-flag w-8"></i>
        <span class="hidden md:block">小红袍餐饮管理系统</span>
      </el-col>
      <el-col :span="18" class="flex justify-center items-center">
        <span>小红袍餐饮管理系统</span>
      </el-col>
      <el-col :span="3" class="flex justify-end items-center">
        <el-badge class="item" is-dot>
          <i class="el-icon-message-solid">
          </i>
        </el-badge>
        <el-dropdown @command="handleCommand">
          <el-avatar src="/static/picture/logo_02.gif"></el-avatar>
          <i class="el-icon-caret-bottom text-white text-sm"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人资料</el-dropdown-item>
            <el-dropdown-item command="admin.message.index">
              <el-badge class="item text-sm" is-dot>
                最新发表
              </el-badge>
            </el-dropdown-item>
            <el-dropdown-item>{{ $store.state.user.name }}</el-dropdown-item>
            <el-dropdown-item command="user/logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </div>
  </div>

</template>

<script>
export default {

  methods: {
    async handleCommand(command) {
      if (command == 'user/logout') {
        await this.axios.post(command)
        localStorage.removeItem('token');
        location.href = '/login';
      } else {
        this.$router.push({'name': command})
      }

    },
  }
}
</script>


<style scoped>

</style>
